<template>
  <div class="dropEl">
    <el-form ref="form" v-loading="loading" :rules="rules" :model="data">
      <el-form-item
        label-width="78px"
        label="任务名称"
        class="custom-form-item"
        prop="taskName"
      >
        <el-input
          v-model="data.taskName"
          placeholder="请填写任务名称"
          style="width: 60%"
        ></el-input>
      </el-form-item>
      <el-form-item
        label="任务描述"
        label-width="78px"
        class="custom-form-item"
        prop="dsc"
      >
        <el-input
          type="textarea"
          v-model="data.dsc"
          placeholder="请填写任务描述"
          style="width: 60%"
        ></el-input>
      </el-form-item>
      <el-form-item
        label-width="78px"
        label="任务类型"
        class="custom-form-item"
        prop="jobType"
      >
        <el-cascader
          :key="data.jobMode"
          v-model="data.jobType"
          :options="taskTypeClassifyOption"
          style="width: 60%"
        ></el-cascader>
      </el-form-item>
      <el-form-item
        label-width="78px"
        label="异常处理"
        class="custom-form-item"
        prop="taskPolicy"
      >
        <el-select
          style="width: 60%"
          v-model="data.taskPolicy"
          placeholder="请选择异常处理"
        >
          <el-option
            v-for="f in dict.type.synchronous_exceptionhandling"
            :key="f.value"
            :label="f.label"
            :value="f.value"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item
        label-width="78px"
        label="工作模式"
        class="custom-form-item"
        prop="jobMode"
      >
        <el-select
          style="width: 60%"
          v-model="data.jobMode"
          placeholder="请选择工作模式"
        >
          <el-option
            v-for="f in computedModeList"
            :key="f.value"
            :label="f.label"
            :value="f.value"
            :disabled="f.disabled"
          ></el-option>
        </el-select>
      </el-form-item>

      <el-row>
        <el-col :span="8">
          <el-form-item
            label-width="78px"
            label="任务模式"
            class="custom-form-item"
            prop="start"
          >
            <el-select
              style="width: 100%"
              v-model="data.start"
              placeholder="请选择一个起始向导"
              @change="changeDatabase('start')"
            >
              <template v-for="f in dict.type.data_base_type">
                <el-option
                  v-if="f.raw.remark == 2"
                  :key="f.value"
                  :label="f.label"
                  :value="f.value"
                ></el-option>
              </template>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="1"> <i class="el-icon-right"></i></el-col>
        <el-col :span="9">
          <el-form-item class="custom-form-item" prop="start">
            <el-select
              style="width: 67%"
              v-model="data.end"
              placeholder="请选择一个结束向导"
              @change="changeDatabase('end')"
            >
              <template v-for="f in dict.type.data_base_type">
                <el-option
                  v-if="f.raw.remark == 1"
                  :key="f.value"
                  :label="f.label"
                  :value="f.value"
                ></el-option>
              </template>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-form-item label="任务状态" prop="status">
        <el-radio-group v-model="data.status">
          <el-radio
            v-for="dict in dict.type.sys_job_status"
            :key="dict.value"
            :label="dict.value"
            >{{ dict.label }}</el-radio
          >
        </el-radio-group>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
export default {
  dicts: [
    "data_base_type",
    "synchronous_tasktype",
    "synchronous_exceptionhandling",
    "synchronous_jobmode",
    "sys_job_status",
    "data_sync_writebatch",
  ],
  components: {},
  props: ["data"],
  data() {
    return {
      form: {
        taskName: "",
        dsc: "",
        jobType: "",
        status: "0",
        taskPolicy: "",
        start: "",
        end: "",
        jobMode: "",
        readerBatch: "",
      },
      jobModeList: [],
      loading: false,
      rules: {
        taskName: [{ required: true, message: "任务名称", trigger: "blur" }],
        status: [
          { required: true, message: "请选择任务状态", trigger: "change" },
        ],
        jobType: [
          { required: true, message: "请选择任务类型", trigger: "change" },
        ],
        taskPolicy: [
          { required: true, message: "请选择异常处理方式", trigger: "change" },
        ],
        start: [{ required: true, message: "请选择起始源", trigger: "change" }],
        end: [{ required: true, message: "请选择目标源", trigger: "change" }],
        jobMode: [
          { required: true, message: "请选择工作模式", trigger: "change" },
        ],
        readerBatch: [
          { required: true, message: "请选择批次最大值", trigger: "change" },
        ],
      },
      taskTypeClassifyOption: [
        {
          value: "common",
          label: "常用",
          children: [],
        },
        {
          value: "basic",
          label: "基本",
          children: [],
        },
      ],
    };
  },
  created() {
    this.loading = true;
  },
  async mounted() {
    setTimeout(() => {
      this.loading = false;
    }, 1000);
    let { data } = await this.getDicts("synchronous_jobmode");
    data.forEach((f) => {
      this.jobModeList.push({
        value: f.dictValue,
        label: f.dictLabel,
      });
    });
    let res = await this.getDicts("synchronous_tasktype");
    res.data.forEach((f) => {
      this.taskTypeClassifyOption[f.remark == "common" ? 0 : 1].children.push({
        value: f.dictValue,
        label: f.dictLabel,
      });
    });
  },
  computed: {
    computedModeList() {
      let arr = this.jobModeList;
      let v = this.$props.data.jobType;
      if (!v || !Array.isArray(v)) {
        return arr;
      }
      arr.forEach((f) => {
        delete f.disabled;
        f.disabled =
          v[1] == "SYNC_DATA" ? f.value == "ONCE" : f.value != "ONCE";
      });
      console.log(v[1], this.$props.data.jobMode);
      if (
        (v[1] == "SYNC_DATA" && this.$props.data.jobMode == "ONCE") ||
        (v[1] != "SYNC_DATA" && this.$props.data.jobMode != "ONCE")
      ) {
        this.$props.data.jobMode = "";
      }
      return arr;
    },
  },
  methods: {
    onSubmit() {},
    createFilter(queryString) {
      return (restaurant) => {
        return (
          restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) ===
          0
        );
      };
    },
    handleSelect(item) {},
    changeDatabase(v) {
      this.$props.data[v == "start" ? "sourceId" : "sinkId"] = "";
    },
  },
};
</script>

<style lang="scss" scoped>
.dropEl {
  width: 100%;
  margin: 30px auto;
  border: 1px solid #dcdfe6;
  padding: 40px 15%;
}

.el-col-1 {
  margin-top: 5px !important;
  text-align: center;
}
</style>
